<template>
  <view>
    <view class="header">
      <view>
        <u-swiper
          :list="list1"
          indicator
          indicatorMode="line"
          height="150"
          circular
          :autoplay="true"
        ></u-swiper>
      </view>
      <view class="container">
        <view @click="Releasesource()">
          <image src="../../static/iocn1.png"></image><text>发布货源</text>
        </view>
        <view class="sjchaxun" @click="tosjchaxun()">
          <image src="../../static/iocn58.png"></image><text>司机查询</text>
        </view>
        <view @click="Findspecialline()">
          <image src="../../static/iocn2.png"></image><text>查找专线</text>
        </view>
        <view @click="Mywaybill()">
          <image src="../../static/iocn3.png"></image><text>我的运单</text>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="current">最新报价</view>
      <view
        class="description"
        v-for="(item, index) in list"
        :key="index"
        @click="skip(item)"
      >
        <view class="description_top">
          <view class="fl">
            <text>{{ item.shipZone }}</text>
            <image src="../../static/iocn4.png"></image>
            <text>{{ item.receiveZone }}</text>
          </view>
          <!-- <view class="fr">2022.10.31 14:28</view> -->
        </view>
        <view class="description_key">
          <text>货物信息：{{ item.goodsName }} {{ "/" }} {{ item.goodsPackagMethod }} {{ "/" }} {{ item.goodsSize }}m³ {{ "/" }} {{ item.goodsWeight }}T
          </text>
          <text
            >车辆信息：{{ item.lesscarload }} {{ "/" }} {{ item.demandLength }} {{ "/" }} {{ item.demandLoad }} {{ "/" }} {{ item.demandStyle }}
          </text>
        </view>
        <view class="description_box">
          <view class="iocn">
            <view class="iocn1">
              <image src="../../static/iocn5.png" />
            </view>
            <view class="iocn2">
              <image src="../../static/iocn5.png" />
            </view>
            <view class="iocn3">
              <image src="../../static/iocn6.png" />
            </view>
          </view>
          <text>{{ item.offerCount }}人已报价</text>
          <text class="textb" v-if="item.returnDeposit == true"
            >（订金可退还）</text
          >
          <text class="textb" v-else>（订金不可退还）</text>
        </view>
      </view>
    </view>

    <view>
      <Tabbar :current="'0'"></Tabbar>
      <!-- <Tabbars v-else="roles==='司机'" :current="'0'"></Tabbars> -->
    </view>

    <!-- 弹窗 -->
    <view class="screenshot" v-show="notification">
      <view class="screenshot_key">
        <image src="../../static/Noorder.png" class="image_top"></image>
        <uni-icons
          type="closeempty"
          size="30"
          class="image_gb"
          @click="guanbi()"
        ></uni-icons>
        <view class="screenshot_top">很抱歉，您还没有进行身份认证</view>
        <view class="screenshot_box"
          >需上传身份证或营业执照、道路运输许可证认证成功即可进行报价接单</view
        >
        <view class="screenshot_zhen" @click="authentication()">去认证</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  Authenticate,
  GetWeiXinMobileLogin,
  GetNewWayBill,
  GetPlayQueue,
  CreateAudio,
  BindWeiXin,
  GetUserMsgCfg,
} from "@/public/Api/update.js";
import { setValue, getValue } from "@/public/storeage/index.js";
import Tabbar from "@/pages/navigation/navigation.vue";
import Tabbars from "@/pages/navigation/sjnavigation.vue";
export default {
  components: {
    //注册组件
    Tabbar,
    Tabbars,
  },
  data() {
    return {
      list1: [
        "https://syh-1.oss-cn-shanghai.aliyuncs.com/a4c27def-5b5a-4100-b38a-d38c00b17dfd.jpg ",
        "https://syh-1.oss-cn-shanghai.aliyuncs.com/banner_syh.png",
      ],
      list: [],
      notification: false,
      skipCount: 0,
      maxResultCount: 10,
      roles: "",
      shows: true,
      mobile: "",
      fileName: "",
      myTelphone: "",
      time: 0,
      ad: null,
    };
  },
  onLaunch() {},
  onLoad() {
	
    var id = getValue("id");
    if (id == undefined || id == null || id == "") {
      uni.reLaunch({
        url: "/pages/Loginas/logon",
      });
      return false;
    }
    this.GetUserMsgCfg();
    this.GetNewWayBill();

    var status = getValue("status");

    if (status !== "正常") {
      uni.reLaunch({
        url: "/pages/Loginas/index",
      });
      return false;
    }
    // var roles = getValue("roles");
    // if (roles == "司机") {
    //   uni.reLaunch({
    //     url: "/pages/index/sjindex",
    //   });
    // }
    var approved = getValue("approved");
    this.shows = approved;
	uni.authorize({
		scope: "scope.userLocation",
		success: (res) => {
			console.log("用户同意了授权", res);
		},
	});
  },
  onHide() {
    clearInterval(this.ad);
  },
  methods: {
    guanbi() {
      this.notification = false;
    },
    skip(e) {
      var id = e.id;
      if (this.shows == false) {
        this.notification = true;
      } else {
        uni.navigateTo({
          url: "/pages/quotedprice/index?id=" + id,
        });
      }
    },

    Releasesource() {
      if (this.shows == false) {
        this.notification = true;
      } else {
        uni.navigateTo({
          url: "/pages/Releasesource/index",
        });
      }
    },
    Findspecialline() {
      uni.navigateTo({
        url: "/pages/Findspecialline/index",
      });
    },
    tosjchaxun() {
      uni.navigateTo({
        url: "/pages/sjchaxun/sjchaxun",
      });
    },
    Mywaybill() {
      uni.navigateTo({
        url: "/pages/Mywaybill/index",
      });
    },

    authentication() {
      uni.navigateTo({
        url: "/pages/PersonalCenter/authentication",
      });
    },
    //获取播报队列
    async GetPlayQueue() {
      var userId = getValue("id");
      const { data: res } = await GetPlayQueue({
        userId,
      });
      if (res.result == null) {
        return false;
      } else {
        this.CreateAudio(res.result.contents);
      }
    },

    //运单播报
    async CreateAudio(contents) {
      var content = contents;
      var format = "mp3";
      var voice = "xiaoyun";

      try {
        const { data: res } = await CreateAudio({
          content,
          format,
          voice,
        });
        this.fileName = res.result.fileName;
        this.ScanAudio();
      } catch (e) {}
    },
    async ScanAudio() {
      var music = null;

      music = uni.createInnerAudioContext(); //创建播放器对象

      music.src = this.fileName;

      music.play(); //执行播放

      music.onEnded(() => {
        //播放结束

        music = null;
      });
    },
    // 获取最新报价
    async GetNewWayBill() {
      var skipCount = this.skipCount;
      var maxResultCount = this.maxResultCount;
      try {
        const { data: res } = await GetNewWayBill({
          skipCount,
          maxResultCount,
          status: 1,
        });
        this.list = res.result.items;
        console.log("报价", this.list);
      } catch (e) {}
    },
    async GetUserMsgCfg() {
      var userId = getValue("id");
      try {
        const { data: res } = await GetUserMsgCfg({
          userId,
        });
        this.time = res.result.ttsInterval;
        var time = this.time * 1000;
        if (res.result.enableTTS == true) {
          this.ad = setInterval(() => {
            this.GetPlayQueue();
          }, time);
        }
      } catch (e) {}
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f7f7f7;
}

.header {
  position: fixed;
  top: 0;
  z-index: 999;
  margin-left: 17upx;
  background-color: #f7f7f7;
}

.container {
  width: 721.96upx;
  height: 166.47upx;
  opacity: 1;
  border-radius: 17.52upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  margin: 0 auto;
  margin-top: 20upx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  view {
    width: 33.33333%;

    image {
      width: 105upx;
      height: 105upx;
      margin: 0 auto;
      display: block;
    }

    text {
      display: block;
      font-size: 24.53upx;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      text-align: center;
      padding-top: 10upx;
    }
  }
}

.sjchaxun {
  image {
    background-color: #ef4d3d;
    border-radius: 18upx;
    padding: 0;
  }
}

.content {
  width: 721.96upx;
  opacity: 1;
  border-radius: 17.52upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  margin: 0 auto;
  margin-top: 500upx;

  .current {
    font-size: 31.54upx;
    font-weight: bold;
    line-height: 47upx;
    padding-top: 15upx;
    padding-left: 37upx;
    position: relative;
  }

  .current:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180.49upx;
    height: 12.27upx;
    opacity: 1;
    background-image: url(../../static/rectangle.png);
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
    margin-left: -245upx;
    margin-top: 20upx;
  }

  .description {
    margin-top: 20upx;
    border-radius: 17.52upx;
    box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
      1.75upx 1.75upx 7.01upx 0px #cccccc;
    padding: 0 38upx;

    .description_top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .fl {
        display: flex;
        align-items: center;

        text {
          width: 240upx;
          font-size: 26upx;
          font-weight: bold;
          color: #000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        image {
          width: 109upx;
          height: 109upx;
        }
      }

      .fr {
        font-size: 15.77upx;
        color: rgba(56, 56, 56, 1);
      }
    }

    .description_key {
      margin-top: -30upx;
      padding-bottom: 20upx;
      border-bottom: 2upx solid #e5e5e5;

      text {
        display: block;
        font-size: 21.03upx;
        font-weight: 400;
        color: rgba(56, 56, 56, 1);
        padding-top: 15upx;
      }
    }

    .description_box {
      padding: 14upx 0;
      display: flex;
      align-items: center;

      .iocn {
        width: 170upx;
        display: flex;
        align-items: flex-start;
      }

      .iocn1 {
        width: 35upx;
        height: 35upx;
        background: #ef4d3d;
        border-radius: 8.76upx;

        image {
          width: 35upx;
          height: 35upx;
        }
      }

      .iocn2 {
        width: 35upx;
        height: 35upx;
        border-radius: 8.76upx;
        background: #ffc300;
        margin-top: 8upx;
        margin-left: -10upx;

        image {
          width: 35upx;
          height: 35upx;
        }
      }

      .iocn3 {
        margin-top: 10upx;
        margin-left: -10upx;
        background-color: #e5e5e5;
        width: 35upx;
        height: 35upx;
        border-radius: 8.76upx;

        image {
          width: 35upx;
          height: 35upx;
        }
      }

      text {
        font-size: 22.78upx;
        font-weight: 500;
        color: rgba(56, 56, 56, 1);
      }

      .textb {
        margin-left: 200upx;
        color: #9f9f9f;
      }
    }
  }
}

.screenshot {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  .screenshot_key {
    width: 676.4upx;
    height: 441.59upx;
    opacity: 1;
    background: #ffffff;
    box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .image_top {
      width: 506upx;
      height: 506upx;
      display: block;
      margin: 0 auto;
      margin-top: -350upx;
    }

    .image_gb {
      width: 32upx;
      height: 32upx;
      position: absolute;
      top: 8upx;
      right: 48upx;
    }

    .screenshot_top {
      font-size: 29.79upx;
      font-weight: bold;
      letter-spacing: 3.5upx;
      color: rgba(0, 0, 0, 1);
      text-align: center;
      margin-top: -70upx;
    }

    .screenshot_box {
      padding: 46upx 40upx 0;
      font-size: 28.04upx;
      font-weight: 400;
      letter-spacing: 3.5upx;
      line-height: 61.33upx;
      color: rgba(56, 56, 56, 1);
      text-align: center;
    }

    .screenshot_zhen {
      width: 231.31upx;
      height: 71.85upx;
      line-height: 71.85upx;
      opacity: 1;
      border-radius: 17.52upx;
      background: #f04d3e;
      color: rgba(255, 255, 255, 1);
      font-size: 31upx;
      text-align: center;
      margin: 0 auto;
      margin-top: 30upx;
    }
  }
}
</style>
